<!DOCTYPE html>
<html>
<head>
	<title>Opus Encoder</title>
	<meta charset="UTF-8">
	<script src="jquery.min.js"></script>
</head>

<!--
/*!
 * Copyright © 2014 Rainer Rillke <lastname>@wikipedia.de
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 * IN THE SOFTWARE.
 */
-->

<body>
	<div id="body-content">
		<h1>Opus encoder</h1>
		<progress style="display: inline-block; text-align: center; width: 100%;" value="0" max="100">Your browser does not support this tool. Upgrade to a modern browser, please.</progress>
		<input id="com-file-analyzer-fileinput" autofocus="" type="file" />

		<script type='text/javascript'>
			var $prog = $('progress'),
				$console = $('#console'),
				$input = $('input'),
				// Create a new web worker
				// note that for each file you're going to encode
				// you'll need to create a new web worker even
				// if the previous one already finished
				// This is because the "runtime" is shut down by
				// Emscripten after one file was encoded
				worker = new Worker('worker/EmsWorkerProxy.js');

			// $input is a file input
			// when its value changed, the user most likely
			// inserted a file
			$input.change(function() {
				// Get the file supplied by the user
				// and create a FileReader to get its
				// contents as ArrayBuffer
				var f = this.files[0],
					fr = new FileReader();

				// Disable input to prevent the user
				// from inserting another file
				$input.attr('disabled', 'disabled');

				// Add an event listener to the file reader
				// so we know when it's done with the whole file
				fr.addEventListener('loadend', function() {
					// Command line arguments
					// These are strings such as
					// options, input file and output file
					var args = [
						// Input file *name*
						f.name,
						// Output file *name*
						'encoded.opus'
					];
					// Input file data
					// Object literal mapping
					// file names to Uint8Array
					var inData = {};
					// Remember: We set f.name as input file name
					inData[f.name] = new Uint8Array(fr.result);

					// Meta-information about the files
					// that are being created during encoding
					// Currently MIME type only
					var outData = {
						// Name of the file that is being created
						// Remenber: We previously set 'encoded.opus'
						// as output file name in the command line
						// arguments array args
						'encoded.opus': {
							// Its MIME type
							'MIME': 'audio/ogg'
						}
					};

					// Finally post all the data to the
					// worker together with the "encode"
					// command.
					worker.postMessage({
						command: 'encode',
						args: args,
						outData: outData,
						fileData: inData
					});
				});

				// Read the file as ArrayBuffer
				// The FileReader will fire the `loadend`
				// event upon completion.
				fr.readAsArrayBuffer(f);
			});

			// Listen for messages by the worker
			worker.onmessage = function(e) {
				// If the message is a progress message
				if (e.data && e.data.reply === 'progress') {
					vals = e.data.values;
					if (vals[1]) {
						// ... push the progress bar forward
						$prog.val(vals[0] / vals[1] * 100);
					}
				// If the worker is ready
				} else if (e.data && e.data.reply === 'done') {
					$prog.val(100);
					for (fileName in e.data.values) {
						// ... offer all files the worker returned
						// In this case it's only one because we didn't
						// use a command line argument that would force
						// opusenc.js to create another file
						$('<a>')
							.text(fileName)
							.prop('href',
								window.URL.createObjectURL(e.data.values[fileName].blob)
							)
							.insertAfter($input);
					}
				}
			};
		</script>
	</div>
</body>

</html>
